<template>
	<view class="bills-list">
		<view class="bill-date-item" v-for="billDate in billsListByDate" :key="billDate.dateShow">
			<p><span style="margin-right: 10px;">{{billDate.dateShow}}</span><span style="color: #f29100;font-weight: 700;font-size: 13px;">{{billDate.countTotal}}</span></p>
			<view class="bills-item" v-for="bill in billDate.bills" @click="clickItem(bill)">
				<span style="color: #18b566;" v-if="bill.type=='income'">{{bill.count}}</span>
				<span style="color: #dd6161;" v-else-if="bill.type=='expenditure'">-{{bill.count}}</span>
				<span>
					<!-- {{bill.labels&&bill.labels.join(',')}} -->
					<u-tag v-for="label in bill.labels" :text="label" shape="circle" style="margin-left: 2px;"></u-tag>
				</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "billsList",
		props: {
			billsList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			billsListByDate() {
				let billsByDate = []
				this.billsList.forEach(bill => {
					const index = billsByDate.findIndex(item => {
						return item.dateShow == bill.dateShow
					})
					if (index == -1) {
						billsByDate.push({
							dateShow: bill.dateShow,
							bills: [bill]
						})
					} else {
						billsByDate[index].bills.push(bill)
					}
				})
				billsByDate.forEach(billsByDate => {
					billsByDate.countTotal = billsByDate.bills.map(bill=>{
						return Number(bill.type == 'income'?bill.count:(bill.type == 'expenditure'?-bill.count:0))
					}).reduce(function(prev, cur) {
						return prev + cur;
					}, 0).toFixed(2);
				})
				return billsByDate.sort((a, b) => {
					return new Date(b.dateShow).getTime() - new Date(a.dateShow).getTime()
				})
			}
		},
		data() {
			return {

			};
		},
		methods: {
			clickItem(item){
				uni.navigateTo({
					url: `/pages/editBill/editBill?_id=` + `${item._id}`
				});
			}
		}
	}
</script>

<style>
	.bills-list {
		padding: 0 15px;
	}

	.bill-date-item {
		margin-top: 10px;
	}

	.bill-date-item>p {
		font-size: 12px;
		color: #666;
	}

	.bills-item {
		height: 47px;
		line-height: 47px;
		border-bottom: 1px solid #ddd;
		padding-left: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.bills-item>span:nth-child(2){
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 47px;
		line-height: 47px;
	}
</style>